<template>
    <div class="registerBox">
        <MainNav/>
        <div class="contentRegister">
            <el-container class="container">
                <el-aside class="menuBox">
                    <el-menu
                            :default-active="active"
                            :router="true"
                            class="el-menu-vertical-demo">
                        <el-menu-item index="studentRegister">
                            <span slot="title">学生</span>
                        </el-menu-item>
                        <el-menu-item index="parentRegister">
                            <span slot="title">家长</span>
                        </el-menu-item>
                        <el-menu-item index="schoolRegister">
                            <span slot="title">学校</span>
                        </el-menu-item>
                        <el-menu-item index="educatorRegister">
                            <span slot="title">教育工作者</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main class="formBox">
                    <router-view />
                </el-main>
            </el-container>
        </div>
    </div>
</template>

<script>
    import MainNav from '@c/MainNav/index.vue'

    export default {
        components: {
            MainNav
        },
        data() {
            return {
                active:'studentRegister'
            }
        },
        methods:{

        }
    }
</script>

<style lang="scss" scoped>
    .registerBox {
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        .contentRegister {
            width: 100%;
            min-height: calc(100vh - 100px);
            background-color: #F2F6FC;
            background: url("../../assets/image/bg_3.png") no-repeat center;
            background-size: cover;
            .container{
                width: 60%;
                margin: 0 auto;
                box-sizing: border-box;
                padding: 20px 0;

                .menuBox{
                    background-color: white;
                }

                .formBox{
                    padding: 0 20px;
                }
            }

        }
    }
</style>
